<template>
  <el-breadcrumb class="app-breadcrumb" separator="">
    <transition-group name="breadcrumb" class="breadcrumb-inner">
      <el-breadcrumb-item 
        v-for="(item, index) in levelList" 
        :key="item.path"
        class="breadcrumb-item"
      >
        <div class="item-wrapper">
          <router-link 
            v-if="index < levelList.length - 1"
            :to="item.redirect || item.path"
            class="link-item"
          >
            <i v-if="index === 0" class="el-icon-s-home link-icon"></i>
            {{ item.name }}
          </router-link>
          <span v-else class="current-item">
            <i v-if="index === 0" class="el-icon-s-home current-icon"></i>
            {{ item.name }}
          </span>
          <el-icon v-if="index < levelList.length - 1" class="separator"><arrow-right /></el-icon>
        </div>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
import pathToRegexp from 'path-to-regexp'
import { generateTitle } from '@/utils/i18n'
export default {
  data() {
    return {
      levelList: null
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
    this.breadcrumbStyleChange()
  },
  methods: {
    generateTitle,
    getBreadcrumb() {
      // only show routes with meta.title
      let route = this.$route
      let matched = route.matched.filter(item => item.meta)
      const first = matched[0]
      matched = [{ path: '/index' }].concat(matched)

      this.levelList = matched.filter(item => item.meta)
    },
    isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'Index'.toLocaleLowerCase()
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink(item) {
      const { redirect, path } = item
      if (redirect) {
        this.$router.push(redirect)
        return
      }
      this.$router.push(path)
    },
    breadcrumbStyleChange(val) {
      this.$nextTick(()=>{
        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__separator').forEach(el=>{
          el.innerText = "/"
          el.style.color = "rgba(0, 0, 0, 1)"
        })
        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner a').forEach(el=>{
          el.style.color = "rgba(58, 58, 58, 1)"
        })
        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner .no-redirect').forEach(el=>{
          el.style.color = "rgba(0, 0, 0, 1)"
        })

        let str = "2"
        if(2 == str) {
          // let headHeight = "60px"
          // headHeight = parseInt(headHeight) + 10 + 'px'
          // document.querySelectorAll('.app-breadcrumb').forEach(el=>{
          //   el.style.marginTop = headHeight
          // })
        }

      })
    },
  }
}
</script>

<style scoped>
.app-breadcrumb {
  height: 48px;
  display: flex;
  width: 98%;
  align-items: center;
  padding: 0  28px;
  background: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(245,247,250,0.96) 100%);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border-radius: 8px;
  margin: 12px 16px;
  box-sizing: border-box;
}

.breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}

.breadcrumb-item {
  :deep(.el-breadcrumb__inner) {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0;
    margin: 0;
  }
}

.item-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.link-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--el-text-color-regular);
  padding: 4px 12px;
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:hover {
    background: rgba(64, 158, 255, 0.08);
    color: var(--el-color-primary);
    transform: translateY(-1px);
    
    .link-icon {
      color: var(--el-color-primary);
    }
  }
}

.link-icon {
  margin-right: 6px;
  font-size: 16px;
  color: var(--el-text-color-secondary);
}

.current-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--el-color-primary);
  padding: 4px 12px;
  background: rgba(64, 158, 255, 0.1);
  border-radius: 6px;
}

.current-icon {
  margin-right: 6px;
  font-size: 16px;
}

.separator {
  color: var(--el-text-color-placeholder);
  font-size: 12px;
  margin-left: 8px;
}

@media (max-width: 768px) {
  .app-breadcrumb {
    padding: 0 16px;
    margin: 8px;
    border-radius: 6px;
  }
  
  .link-item,
  .current-item {
    font-size: 13px;
    padding: 2px 8px;
  }
  
  .link-icon,
  .current-icon {
    font-size: 14px;
  }
}
span.el-breadcrumb__item.breadcrumb-item {
    display: flex;
    align-items: center;
}
</style>